<template>
	<view class="wrap">
		<image src="/static/r-t.png" class="rt" mode=""></image>
		<image src="/static/l-b.png" class="lb" mode=""></image>
		<image src="../../static/logo.png" class="logo" mode=""></image>
		<text class="title">Hi,欢迎使用安恒理财</text>
		<view class="from">
			<view class="from-item">
				<text class="area" @click="bindAreaCode">{{registerUser.countryNo}}</text>
				<input type="number" v-model="registerUser.mobile" placeholder="请输入手机号" placeholder-class="phl" />
			</view>
			<view class="from-item">
				<input type="number" v-model="registerUser.code" style="width: 350rpx;" placeholder="请输入验证码" placeholder-class="phl" />
				<text class="code" @click="getCode">{{codeMessage}}</text>
			</view>
			
			<view class="from-item">
				<input type="password" v-model="registerUser.password" placeholder="请输入8到18位字母+数字密码" placeholder-class="phl" />
			</view>
			<view class="from-item">
				<input type="text" placeholder="请输入邀请码" v-model="registerUser.inviteCode" placeholder-class="phl" />
			</view>
			<button  class="submit" @click="bindSubmit">注册账号</button>
			<view class="footer-tips" @click="isState = !isState">
				<image :src="isState?'/static/radio-act.png':'/static/radio.png'" class="radio" mode=""></image>
				<text>同意</text>
				<text style="color: #0265FF;" @click.stop="toWEBYS">用户协议</text>
				<text>和</text>
				<text style="color: #0265FF;" @click.stop="toWEBYH">隐私政策</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		userRegister,
		smsCode
	} from '@/util/api.js'
	import { ref } from "vue";
	const registerUser = ref({
		mobile:"",
		code:"",
		countryNo:"+86",
		inviteCode:"",
		nickName:"",
		password:""
	})
	const isState = ref(true)
	// 获取短信
	const codeMessage = ref("获取验证码")
	let bok = true
	let num = 60
	const getCode = async ()=>{
		if(!registerUser.value.mobile){
			uni.showModal({
				title:"提示",
				content:"请输入手机号码",
				showCancel:false
			})
			return false
		}
		if(!bok) return false;
		bok = false
		uni.showLoading({
			mask:true
		})
		const result = await smsCode({countryNo:registerUser.value.countryNo,mobile:registerUser.value.mobile})
		uni.hideLoading()
		if(result.code!=200){
			bok = true
			codeMessage.value = "获取验证码"
			return false
		}
		let timer = setInterval(()=>{
			num--
			codeMessage.value = `${num}秒后重试`
			if(num<=0){
				bok = true
				codeMessage.value = "获取验证码"
				clearInterval(timer)
			}
		},1000)
	}
	// 提交
	const bindSubmit = async ()=>{
		if(isState.value == false){
			uni.showModal({
				title: "提示",
				content: "请同意用户协议和隐私政策",
				showCancel: false
			})
			return false;
		}
		if(!registerUser.value.mobile){
			uni.showModal({
				title:"提示",
				content:"请输入手机号码",
				showCancel:false
			})
			return false
		}
		if(!registerUser.value.code){
			uni.showModal({
				title:"提示",
				content:"请输入验证码",
				showCancel:false
			})
			return false
		}
		if(!registerUser.value.password){
			uni.showModal({
				title:"提示",
				content:"请输入密码",
				showCancel:false
			})
			return false
		}
		uni.showLoading({
			mask:true
		})
		const result = await userRegister(registerUser.value)
		uni.hideLoading()
		if(result.code==200){
			uni.setStorageSync('token',result.data.token)
			uni.setStorageSync('tokenHead',result.data.tokenHead)
			uni.reLaunch({
				url:"/pages/index/index"
			})
		}
		
		
	}
	const bindAreaCode = ()=>{
		uni.navigateTo({
			url:"/pages/areaCode/areaCode"
		})
	}
	const toWEBYH = (url)=>{
		uni.navigateTo({
			url:"/pages/webviewXy/webviewXy"
		})
	}
	const toWEBYS = (url)=>{
		uni.navigateTo({
			url:"/pages/webviewYS/webviewYS"
		})
	}
	uni.$on('onSelectAreaCode',(code)=>{
		
		registerUser.value.countryNo = code
	})
	
</script>

<style lang="scss"> 
.from{
	padding: 0 38rpx;
	.from-item{
		width: 519rpx;
		height: 100rpx;
		background: #F6F6FF;
		border-radius: 71rpx;
		margin-bottom: 38rpx;
		display: flex;
		align-items: center;
		padding: 0 77rpx;
		.phl{
			color: #999;
			font-size: 28rpx;
		}
		.area{
			display: block;
			margin-right: 38rpx;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
		}
		.code{
			font-weight: bold;
			display: block;
			
			color: #333333;
			font-size: 28rpx;
		}
		input{
			flex: 2;
		}
	}
	.submit{
		width: 673rpx;
		height: 100rpx;
		background: #0265FF;
		box-shadow: 0px 12rpx 23rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 71rpx ;
		margin: 77rpx auto 38rpx;
		border: none;
		color: #fff;
		font-weight: 800;
		font-size: 38rpx;
		line-height: 100rpx;
	}
	.footer-tips{
		display: flex;
		justify-content: center;
		align-items: center;
		.radio{
			width: 27rpx;
			height: 27rpx;
			display: block;
			margin-right: 16rpx;
		}
		text{
			font-size: 27rpx;
			color: #999;
		}
	}
}
.title{
	color: #333;
	font-size: 36rpx;
	font-weight: 800rpx;
	display: block;
	text-align: center;
	margin-bottom: 77rpx;
}
.wrap{
	overflow: hidden;
}
.logo{
	width: 169rpx;
	height: 169rpx;
	display: block;
	margin: 240rpx auto 38rpx; 
}
.rt{
	position: absolute;
	width: 156rpx;
	height: 313rpx;
	right: 0;
	top: 65rpx;
}
.lb{
	position: absolute;
	width: 327rpx;
	height: 313rpx;
	bottom: 0;
	left: 0;
}
</style>
